
 <template>
  <div>
    <div class="rcbl">
      <div class="warpper">
        <div class="inner">
          <i class="iconfont icon-zuojiantou" @click="funk()"></i>
          <input
            type="text"
            placeholder="余枫"
            v-model="inputval"
            @keydown.13="Tososuotiaozhuan()"
          />
        </div>
        <div class="imgbox"><img src="img/cbl.png" alt="" /></div>
        <div class="lishi">
          <div class="text">
            <span class="span1">历史</span>
            <span class="span2">金兆一</span>
          </div>
          <div>
            <i class="iconfont icon-shanchu"></i>
          </div>
        </div>
        <div class="bangdan">
          <div class="resou" @click="com = 'RSB'">热搜榜</div>
          <div class="shipin" @click="com = 'SPB'">视频榜</div>
          <div class="boke" @click="com = 'BKB'">博客榜</div>
          <div class="bofang">播放</div>

        </div>
                   <component :is="com">com</component>
      </div>
      <!-- <ul>
        <li>
          <span>1</span>
        </li>
        <li>
          <span>trip</span>
        </li>
        <li>
          <span>1</span>
        </li>
      </ul> -->
    </div>
  </div>
</template>

<script>
import { getdata } from "@/api/getlink.js";
import RSB from "../../components/myt/resoubang.vue";
import SPB from "../../components/myt/shipinbang.vue";
import BKB from "../../components/myt/bokebang.vue";
export default {
  data() {
    return {
      inputval: "",
      com: "RSB",
    };
  },
  components: {
    RSB,
    SPB,
    BKB
  },
  methods: {
    funk() {
      this.$router.push("/my");
    },
    Tososuotiaozhuan() {
      // http://77dbba.natappfree.cc/playlist/playListByName?name=%E6%AD%8C%E5%8D%95
      getdata("/wySong/likeSearch", { searchname: this.inputval }).then(
        (ok) => {
          // console.log(ok.data.data);
          this.$router.push({
            path: "/sosuotiaozhuan",
            query: { obj: ok.data.data },
          });
        }
      );
    },
  },
};
</script>

<style scoped>
.rcbl {
  width: 100%;
  height: 1.02rem;
}
.warpper {
  margin: 0 0.8rem;
}
input {
  width: 100%;
  height: 0.8rem;
  text-align: center;
  border: 0;
  text-align: left;
  font-size: 0.3rem;
}
.inner {
  border-bottom: 0.01rem solid #626262;
}
i {
  position: relative;
  left: -0.8rem;
  top: 0.7rem;
  font-size: 0.5rem;
  margin-right: 1rem;
  color: #5c5c5c;
}
.lishi {
  width: 100%;
  height: 1.43rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  width: 2.27rem;
  height: 0.66rem;
  display: flex;
  justify-content: space-between;
}
.icon-shanchu {
  position: relative;
  top: 0.01rem;
  left: 0.9rem;
}
.span1 {
  font-weight: 800;
  font-size: 0.3rem;
}
.span2 {
  display: block;
  font-size: 0.3rem;
  width: 1.34rem;
  height: 0.5rem;
  background-color: gray;
  line-height: 0.5rem;
  text-align: center;
  border-radius: 0.2rem;
}
.bangdan {
  height: 1.02rem;
  display: flex;
  justify-content: space-between;
}
.left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left > div {
  margin: 0.2rem;
}
.resou {
  font-size: 0.29rem;
  font-weight: 600;
}
.boke,
.shipin,
.bofang {
  color: #7e7e7e;
}
.bofang {
  border: 1px solid black;
  width: 0.8rem;
  height: 0.33rem;
  line-height: 0.33rem;
  text-align: center;
  border-radius: 0.2rem;
}
ul {
  margin: 0 0.8rem;
  background-color: blanchedalmond;
  display: flex;
}
.imgbox {
  width: 100%;
  height: 1.08rem;
  margin: 0.4rem auto;
}
img {
  width: 100%;
  height: 100%;
}
</style>